<template>
<div id="login">
<el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark">
    登录
    </div></el-col>
</el-row>
<el-row>
  <el-col :span="8"><div class="grid-content bg-purple">用户名</div></el-col>
  <el-col :span="16"><div class="grid-content bg-purple-light">
    <el-input
  placeholder="请输入用户名"
  v-model="username"
  clearable>
</el-input>
    </div></el-col>
</el-row>
<el-row>
  <el-col :span="8"><div class="grid-content bg-purple">密码</div></el-col>
  <el-col :span="16"><div class="grid-content bg-purple-light">
    <el-input
  placeholder="请输入密码"
  v-model="password"
  clearable>
</el-input>
    </div></el-col>
</el-row>
<el-row>
  <el-col :span="8"><div class="grid-content bg-purple">验证码</div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple-light">
    <el-input
  placeholder="请输入验证码"
  v-model="captcha"
  clearable>
</el-input>
    </div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple"><img :src="'http://localhost:8888'+ picPath"/></div></el-col>
</el-row>
<el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark">
    <el-button id="loginbutton" type="primary" size="medium" @click="loginfunc">登录</el-button>
    </div></el-col>
</el-row>
</div>
</template>
<script>
import axios from 'axios'
export default {
    name: "Login",
    components: {},
    data(){
      return {
        username: 'admin',
        password: '123456',
        captcha: '',
        captchaId: "",
        picPath: "",
        }
    },
    created(){
      this.getCaptcha();
    },
    methods: {
      async getCaptcha(){
        axios({
          method: 'post',
          url: 'http://localhost:8888/base/captcha'
        }).then((resp)=>{
          this.picPath = resp.data.data.picPath;
          this.captchaId = resp.data.data.captchaId;
          console.log(resp);
        }).catch(function(error){
          console.log(error);
        });
      },
      async loginfunc(){
        axios({
          method: 'post',
          url: 'http://localhost:8888/base/login',
          data: {
            username: this.username,
            password: this.password,
            captcha: this.captcha,
            captchaId: this.captchaId,
          },
        }).then((resp)=>{
          if(resp.data.msg === '操作成功'){
            console.log("login success!!!");
          }
          console.log(resp);
        }).catch((error)=>{
          this.getCaptcha();
          console.log(error);
        });
      }
    }
}
</script>
<style>
#login{
  /* margin-top: 10%; */
  width: 20%;
  padding: 10% 40% 0% 40%;
}
#loginbutton{
  width:100%;
  height: 40px;
}

  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 40px;
    line-height: 40px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
